<template>
  <div class="Container">
    <SideBar ref="sideBar" @addPhoto="addPhoto"></SideBar>
    <div class="MainContainer"></div>
    <div class="rightBar"></div>
    <el-drawer class="Txt2Img" title="文生图" v-model="showTxt2Img" :close-on-click-modal="false" direction="ltr" size="760px">
      <Txt2Img @startGenerate="generateImg"></Txt2Img>
    </el-drawer>
  </div>
</template>

<script>
import SideBar from '../components/layout/side_bar.vue'
import Txt2Img from '../components/tool/txt2img.vue'
import { ref } from 'vue'
export default {
  name: 'Home',
  components: { SideBar, Txt2Img },
  data () {
    return {
      showRightBar: false,
      showTxt2Img: false,
      Txt2ImgInited: false
    }
  },
  methods: {
    refreshTest(){
      this.$refs.sideBar.refresh();
    },
    addPhoto () {
      this.showTxt2Img = true
    },
    generateImg(){
      this.showTxt2Img = false
      this.$refs.sideBar.refresh();
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.Container{display: flex;height: 100%; width:100%; padding: 12px; box-sizing: border-box; overflow: hidden;}
.MainContainer{flex: 1; background: #fff; border-radius: 6px;}
</style>
